
<template>
    <el-form-item :label="label" :prop="prop" :rules="rules">
      <el-input-number
        v-model="innerValue"
        v-bind="$attrs"
        :disabled="disabled"
        :size="size"
        :min="min"
        :max="max"
        :step="step"
        :step-strictly="stepStrictly"
        :precision="precision"
        :controls="controls"
        :controls-position="controlsPosition"
        :placeholder="placeholder"
        :clearable="clearable"
        @change="handleChange"
        @blur="handleBlur"
        @focus="handleFocus"
      ></el-input-number>
      <div v-if="helpText" class="help-text">{{ helpText }}</div>
    </el-form-item>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  
  // 定义组件属性
  interface Props {
    modelValue: number | undefined
    prop?: string
    label?: string
    rules?: any[]
    disabled?: boolean
    size?: 'large' | 'default' | 'small'
    min?: number
    max?: number
    step?: number
    stepStrictly?: boolean
    precision?: number
    controls?: boolean
    controlsPosition?: 'right' | ''
    placeholder?: string
    clearable?: boolean
    helpText?: string
  }
  
  // 设置默认值
  const props = withDefaults(defineProps<Props>(), {
    modelValue: undefined,
    prop: '',
    label: '',
    rules: () => [],
    disabled: false,
    size: 'default',
    min: -Infinity,
    max: Infinity,
    step: 1,
    stepStrictly: false,
    precision: undefined,
    controls: true,
    controlsPosition: '',
    placeholder: '请输入',
    clearable: false,
    helpText: ''
  })
  
  // 定义事件
  const emit = defineEmits(['update:modelValue', 'change', 'blur', 'focus'])
  
  // 内部值双向绑定
  const innerValue = computed({
    get: () => props.modelValue,
    set: (val) => {
      emit('update:modelValue', val)
    }
  })
  
  // 处理值变化事件
  const handleChange = (val: number) => {
    emit('change', val)
  }
  
  // 处理失焦事件
  const handleBlur = (event: FocusEvent) => {
    emit('blur', event)
  }
  
  // 处理聚焦事件
  const handleFocus = (event: FocusEvent) => {
    emit('focus', event)
  }
  </script>
  
  <style scoped>
  .help-text {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
    line-height: 1.4;
  }
  </style>  